<!DOCTYPE HTML>
<html>

<head>
    <title>For Rent</title>
    <!---css--->
    <link href="../static/css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <link href="../static/css/style.css" rel='stylesheet' type='text/css'/>
    <!---css--->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Real Space Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!---js--->
    <script src="/static/js/jquery-1.11.1.min.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <!---js--->
    <!-- FlexSlider -->
    <script src="/static/js/jquery.flexslider.js"></script>
    <link rel="stylesheet" href="/static/css/flexslider.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="/static/css/second.css" type="text/css" media="screen">
    <script>
        // Can also be used with $(document).ready()
        $(window).load(function () {
            $('.flexslider').flexslider({
                animation: "slide",
                controlNav: "thumbnails"
            });
        });
    </script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/qs.js"></script>
    <!-- //FlexSlider-->
</head>

<body>
<div class="header-section">
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand">
                    <h1><a href="index.html"><span>Real </span>Space</a></h1>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="index">主页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="secondlist">二手房</a></li>
                    <li><a href="rentlist">租房</a></li>
                    <li><a href="newhourse">新房 </a></li>
                    <li><a href="community">小区</a></li>
                    <li><a href="broker">经纪人</a></li>
                    <li><a href="knowledge">知识</a></li>
                </ul>
                <div class="email" v-if="name==null">
                    <ul>
                        <li><i class="glyphicon glyphicon-log-in" aria-hidden="true"></i><a href="#" data-toggle="modal"
                                                                                            data-target="#myModal">登陆</a>
                        </li>
                        <li><i class="glyphicon glyphicon-lock" aria-hidden="true"></i><a href="#" data-toggle="modal"
                                                                                          data-target="#myModal1">注册</a>
                        </li>
                    </ul>
                </div>
                <div class="login-next" v-if="name!=null">
                    <img :src="image"
                         style="width: 40px;height: 40px;margin-top: 12px;border-radius: 50%;float: left;margin-left: 140px;">
                    <p class="login-p"
                       style="color:white;float: left;margin-top: 15px;margin-left: 5px;font-size: 20px;" v-text="name">
                        {{name}}</p>
                </div>
                <div class="clearfix"></div>
            </div>
        </nav>
    </div>
</div>

<div class="banner-section">
    <div class="container">
        <h2>二手房</h2>
    </div>
</div>

<div class="content">
    <div class="properties-section">
        <div class="container">
            <div class="title-page">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active" id="li-s1">
                        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">条件筛选</a>
                    </li>
                    <li role="presentation" id="li-s2">
                        <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" class="hourse-card"
                           @click="cards">选房卡</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="col-lg-6">
                            <h3>二手房源点</h3>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="区域，商圈，小区应有尽有">
                                <span class="input-group-btn">
                                    <button class="btn btn-warning" type="button">Go!</button>
                                </span>
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">
                        <div class="slide-on">
                            <ul class="clear">
                                <div class="znxf-item" class="card1" v-for="c in carddata">
                                    <a class="znxf-item-con">
                                        <div class="znxf-tit">
                                            <i class="tuijian" style="width:32px;">推荐</i>
                                        </div>
                                        <div class="znxf-tiaoj">
                                            <dl>
                                                <dt>总价</dt>
                                                <dd>{{c.price}}</dd>
                                            </dl>
                                            <dl>
                                                <dt>面积</dt>
                                                <dd>{{c.area}}</dd>
                                            </dl>
                                            <dl>
                                                <dt>户型</dt>
                                                <dd>{{c.type}}</dd>
                                            </dl>
                                            <dl>
                                                <dt>区域</dt>
                                                <dd>{{c.adress}}</dd>
                                            </dl>
                                        </div>
                                        <div class="znxf-label" v-for="f in c.feature">
                                            <p>{{f.features}}</p>
                                        </div>
                                    </a>
                                    <span class="glyphicon glyphicon-pencil"></span>
                                    <span class="glyphicon glyphicon-remove"></span>
                                </div>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="properties-grids">
                <div class="col-md-9 forsales-left">
                    <div class="forsale">
                        <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
                            <ul id="myTab" class="nav nav-tabs left-tab" role="tablist">
                                <li role="presentation" class="active">
                                    <a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home"
                                       aria-expanded="true">
                                        <img src="../static/images/menu1.png">
                                    </a>

                                </li>
                                <p3>搜索结果</p3>
                            </ul>
                            <div id="myTabContent" class="tab-content">
                                <div role="tabpanel" class="tab-pane fade in active" id="home"
                                     aria-labelledby="home-tab" v-for="(main,index) in mainlists">
                                    <div class="forsale-grids">
                                        <h4>
                                            <a href="#">{{main.title}}</a>
                                        </h4>
                                        <div class="forsale1">
                                            <div class="forsale-left">
                                                <a href="about.html">
                                                    <img :src="main.image" class="img-responsive" alt="/">
                                                </a>
                                            </div>
                                            <div class="yin" style="display: none">{{main.id}}</div>
                                            <div class="forsale-right">
                                                <h5>
                                                    {{main.price}}
                                                    <label>万</label> - 单价
                                                    <span>39428</span>元/m²
                                                </h5>
                                                <p>{{main.feature}}</p>
                                                <a class="button4" :href=" '../front/detail/'+ main.id ">more
                                                    details</a>
                                            </div>
                                            <div class="clearfix"></div>
                                            <ul>
                                                <li>
                                                    <i class="glyphicon glyphicon-indent-left"></i> {{main.shape}}
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-globe"></i> {{main.adress}}
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-record"></i> 一月看房
                                                    <span> {{main.times}} </span>次
                                                </li>
                                                <li>
                                                    <i class="glyphicon glyphicon-heart-empty"></i>
                                                    <span>{{main.nice}} </span>人关注
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 properties-right">
                    <div class="properties-top">
                        <h4>条件筛选</h4>
                        <div class="yourplace">
                            <h5>位置</h5>
                            <select class="sel2" id="s1">
                                <option value="" selected="selected">默认</option>
                                <option value="">拱墅区</option>
                                <option value="">下城区</option>
                                <option value="">上城区</option>
                                <option value="">滨江区</option>
                            </select>
                        </div>
                        <div class="yourplace">
                            <h5>总价</h5>
                            <select class="sel2" id="s2">
                                <option value="" selected="selected">默认</option>
                                <option value="">80万以下</option>
                                <option value="">80-150万</option>
                                <option value="">150-200</option>
                                <option value="">200-300万</option>
                            </select>
                        </div>
                        <div class="yourplace">
                            <h5>面积</h5>
                            <select class="sel2" id="s3">
                                <option value="" selected="selected">默认</option>
                                <option value="">50㎡以下</option>
                                <option value="">50㎡-70㎡</option>
                                <option value="">70㎡-90㎡</option>
                                <option value="">90㎡-130㎡</option>
                            </select>
                        </div>
                        <div class="yourplace">
                            <h5>户型</h5>
                            <select class="sel2" id="s4">
                                <option value="" selected="selected">默认</option>
                                <option value="">二室</option>
                                <option value="">三室</option>
                                <option value="">四室</option>
                                <option value="">五室</option>
                                <option value="">六室</option>
                            </select>
                        </div>
                        <div class="yourplace-grids">
                            <div class="col-md-6 yourplace-grid">
                                <h5>关注数</h5>
                                <select class="sel3" id="s5">
                                    <option value="" selected="selected">默认</option>
                                    <option value="">50以下</option>
                                    <option value="">50-100</option>
                                    <option value="">100-200</option>
                                </select>
                            </div>
                            <div class="col-md-6 yourplace-grid">
                                <h5>点赞数</h5>
                                <select class="sel3" id="s6">
                                    <option value="" selected="selected">默认</option>
                                    <option value="">200以下</option>
                                    <option value="">200-500</option>
                                </select>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="search1">
                            <button class="search1-submit" @click="search1">查找</button>
                        </div>
                    </div>
                    <div class="feature">
                        <h4>特色物业</h4>
                        <div class="feature-top">
                            <img src="../static/images/s6.jpg" class="img-responsive" alt="/">
                            <h5>物业1</h5>
                            <p>111
                                <a href="#">更多></a>
                            </p>
                        </div>
                        <div class="feature-top top2">
                            <img src="../static/images/s7.jpg" class="img-responsive" alt="/">
                            <h5>物业2</h5>
                            <p>111
                                <a href="#">更多></a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

<!-- login -->
<div id="not-success">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-info">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body real-spa">
                    <div class="login-grids">
                        <div class="login">

                            <div class="login-right" id="login">
                                <form>
                                    <h3>Login</h3>
                                    <input type="text" value="Enter your Phone" onfocus="this.value = '';"
                                           onblur="if (this.value == '') {this.value = 'Enter your Email';}" required=""
                                           id="username">
                                    <input type="password" value="Password" onfocus="this.value = '';"
                                           onblur="if (this.value == '') {this.value = 'Password';}" required=""
                                           id="password">
                                    <h4><a href="#">忘记密码？</a> / <a href="#">注册账号</a></h4>
                                    <div class="single-bottom">
                                        <input type="checkbox" id="brand" value="">
                                        <label for="brand"><span></span>记住我</label>
                                    </div>
                                    <button type="button" value="" class="logins">登录</button>
                                </form>
                            </div>

                        </div>
                        <p>登陆即同意<a href="#">合约</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- login  -->
    <!-- Register -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-info">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body real-spa">
                    <div class="login-grids">
                        <div class="login">
                            <div class="login-right">
                                <h3>Register </h3>
                                <input type="text" value="Name" onfocus="this.value = '';"
                                       onblur="if (this.value == '') {this.value = 'Name';}" required="" id="name">
                                <input type="text" value="Mobile number" onfocus="this.value = '';"
                                       onblur="if (this.value == '') {this.value = 'Mobile number';}" required=""
                                       id="phone">
                                <input type="password" value="Password" onfocus="this.value = '';"
                                       onblur="if (this.value == '') {this.value = 'Password';}" required=""
                                       id="passwords">
                                <button type="button" value="" class="registers">立即注册</button>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <p>登陆即同意<a href="#">合约</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/second.js"></script>
</body>

</html>